<script lang="ts" setup>
import { ref, watch } from "vue";
import { ElTable, ElProgress } from "element-plus";

let props = defineProps<{
  data: {
    name: string;
    list: any[];
  };
}>();
</script>

<template>
  <div class="pageTable">
    <ElTable
      :data="props.data.list"
      stripe
      style="width: 100%; margin-top: 10px"
      row-key="id"
    >
      <ElTable.TableColumn prop="sort" label="排名" align="center" width="60">
        <template #default="scope">
          <img
            v-if="scope.row.sort == 1"
            src="/static/dataStatistics/rank1.png"
            alt=""
            class="rank-img"
          />
          <img
            v-if="scope.row.sort == 2"
            src="/static/dataStatistics/rank2.png"
            alt=""
            class="rank-img"
          />
          <img
            v-if="scope.row.sort == 3"
            src="/static/dataStatistics/rank3.png"
            alt=""
            class="rank-img"
          />
          <span v-if="scope.row.sort > 3">{{ scope.row.sort }}</span>
        </template>
      </ElTable.TableColumn>
      <ElTable.TableColumn prop="airportName" label="机场名称" align="left">
        <template #default="scope">
          <div class="flex">
            <span style="display: inline-block">{{
              scope.row.airportName
            }}</span>
            <!-- <ElProgress
              v-if="props.data.name == '1'"
              :percentage="scope.row.flyDistance"
              color="#A5C0FB"
            />
            <ElProgress
              v-if="props.data.name == '2'"
              :percentage="scope.row.totalTaskTimes"
              color="#A5C0FB"
            />
            <ElProgress
              v-if="props.data.name == '3'"
              :percentage="scope.row.totalTasks"
              color="#A5C0FB"
            /> -->
            <ElProgress
              v-if="props.data.name == '1'"
              :percentage="scope.row.percentage"
              color="#A5C0FB"
              :stroke-width="12"
              :text-inside="true"
              style="width: 320px; height: 16px; margin-left: 20px"
            />
            <ElProgress
              v-if="props.data.name == '2'"
              :percentage="10"
              color="#A5C0FB"
              :stroke-width="12"
              :text-inside="true"
              style="width: 320px; height: 16px; margin-left: 8px"
            />
            <ElProgress
              v-if="props.data.name == '3'"
              :percentage="50"
              color="#A5C0FB"
              :stroke-width="12"
              :text-inside="true"
              style="width: 320px; height: 16px; margin-left: 8px"
            />
          </div>
        </template>
      </ElTable.TableColumn>
      <ElTable.TableColumn
        prop="flyDistance"
        label="飞行距离"
        align="center"
        width="100"
        v-if="props.data.name == '1'"
      >
        <template #default="scope">
          <span>{{ scope.row.flyDistance }}km</span>
        </template>
      </ElTable.TableColumn>
      <ElTable.TableColumn
        prop="totalTaskTimes"
        label="飞行时长"
        align="center"
        width="100"
        v-if="props.data.name == '2'"
      />
      <ElTable.TableColumn
        prop="totalTasks"
        label="飞行架次"
        align="center"
        width="100"
        v-if="props.data.name == '3'"
      />
    </ElTable>
  </div>
</template>
<style scoped>
:deep(.el-table th) {
  background: #f5f7fa !important;
}

.rank-img {
  width: 42px;
  height: auto;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

:deep(.el-progress-bar__innerText) {
  vertical-align: super;
}

:deep(.el-progress-bar__outer) {
  border-radius: 2px !important;
}

:deep(.el-progress-bar__inner) {
  border-radius: 2px !important;
}
</style>
